<template>
	<view class="all">
		<form @submit="handleSubmit">
			<view class="name">
				<view>优惠券名称</view>
				<view><input v-model="couponName" focus /></view>
			</view>
			<view class="coupon">
				<view>优惠券类型</view>
				<view>
					<radio-group name="">
						<label @click="changeVal" data-index="0">
							<view class="" >
								<text class="a">满减券</text>
								<radio/>
							</view>
						</label>
						<label class="b" @click="changeVal" data-index="1">
							<view class=""   >
								<text class="a">打折券</text>
								<radio/>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="c" v-if="inn">
				<view class="full">
					满<input class="uni-input" v-model="triggerMoney" focus />元减<input class="uni-input" v-model="preferentialMoney" focus />元
				</view>
			</view>
			<view class="c" v-if="out">
				<view class="d">
					打<input class="uni-input" v-model="discount" focus />折
				</view>
			</view>
			<view class="e">
				<view class="SD">
					<view class="uni-list-cell-left">
						发放开始时间
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="f">
								<view>{{date}}</view>
								<view class="arrow"></view>
							</view>

						</picker>
					</view>
				</view>
			</view>
			<view class="e">
				<view class="SD">
					<view class="uni-list-cell-left">
						发放结束时间
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
							<view class="f">
								<view>{{date1}}</view>
								<view class="arrow"></view>
							</view>

						</picker>
					</view>
				</view>
			</view>
			<view class="name">
				<view>投放数量</view>
				<view><input v-model="distributionQuantity" focus /></view>
			</view>
			<view class="name">
				<view>每人限领</view>
				<view><input v-model="limitPerPerson" focus /></view>
			</view>
			<!-- <view class="name">
				<view>使用后有效期</view>
			</view>
			<view class="e">
				<view class="SD">
					<view class="uni-list-cell-left">
						开始时间
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
							<view class="f">
								<view>{{date2}}</view>
								<view class="arrow"></view>
							</view>

						</picker>
					</view>
				</view>
			</view>
			<view class="e">
				<view class="SD">
					<view class="uni-list-cell-left">
						结束时间
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date3" :start="startDate" :end="endDate" @change="bindDateChange3">
							<view class="f">
								<view>{{date3}}</view>
								<view class="arrow"></view>
							</view>

						</picker>
					</view>
				</view>
			</view> -->
			<button form-type="submit">确认投放</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate1 = this.getDate1({
				format: true
			})
			const currentDate2 = this.getDate2({
				format: true
			})
			const currentDate3 = this.getDate3({
				format: true
			})
			return {
				date: currentDate,
				date1: currentDate1,
				date2: currentDate2,
				date3: currentDate3,
				index: 0,
				inn:true,
				out:false,
				couponName: '',
				discount: '',
				triggerMoney: '',
				preferentialMoney: '',
				distributionQuantity: '',
				limitPerPerson: '',
				status: 0,
				dynamicList: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			startDate1() {
				return this.getDate1('start');
			},
			endDate1() {
				return this.getDate1('end');
			},
			startDate2() {
				return this.getDate2('start');
			},
			endDate2() {
				return this.getDate2('end');
			},
			startDate3() {
				return this.getDate3('start');
			},
			endDate3() {
				return this.getDate3('end');
			},
		},
		methods: {
			changeVal(event) {
				console.log(event)
				this.index = event.currentTarget.dataset.index
				if (this.index == 0) {
					this.inn = true,
						this.out = false
				} else if (this.index == 1) {
					this.inn = false,
						this.out = true
				}
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindDateChange1: function(e) {
				this.date1 = e.detail.value
			},
			bindDateChange2: function(e) {
				this.date2 = e.detail.value
			},
			bindDateChange3: function(e) {
				this.date3 = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate1(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate2(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate3(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 提交表单
			handleSubmit(event) {
				// 阻止表单默认提交行为
				event.preventDefault();
				const mid = uni.getStorageSync('UserInfo').id
				// 从表单中获取数据
				const formData = {
					source: 1,
					mid: mid,
					name: this.couponName,
					type: this.index,
					discount: this.discount,
					triggerMoney: this.triggerMoney,
					preferentialMoney: this.preferentialMoney,
					start: this.date,
					end: this.date1,
					num: this.distributionQuantity,
					size: this.limitPerPerson,
					status: 0,
					
				};
				// 处理优惠券投放逻辑
				this.confirmCouponRelease(formData);
			},
			confirmCouponRelease(formData) {
				// 这里可以实现优惠券投放的逻辑，例如发送请求到后端
				console.log("formData",formData);
				const token = uni.getStorageSync('Token')
				// 新增优惠券
				uni.request({
					url: 'http://localhost/dev-api/system/coupons',
					method: 'Post',
					header: {
						'Authorization': 'Bearer ' + token,
					},
					data: formData,
					success: (res) => {
						if (res.statusCode === 200) {
							this.dynamicList = res.data.rows;
							// console.log("res...............................");
							console.log("this.dynamicList", this.dynamicList);
						} else {
							console.log("请求失败");
				
						}
					},
					fail: (err) => {
						console.log("请求失败");
					},
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.name {
		display: flex;
		line-height: 102rpx;
		padding: 0 30rpx 0 76rpx;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.name>view:nth-child(1) {
		height: 102rpx;
		width: 226rpx;
		border-bottom: 1rpx solid #F7F7F7;
	}

	.name>view:nth-child(2) {
		margin-top: 30rpx;
		border-bottom: 1rpx solid #F7F7F7;
	}

	.coupon {
		display: flex;
		line-height: 102rpx;
		padding: 0 30rpx 0 76rpx;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.coupon>view:nth-child(1) {
		height: 102rpx;
		width: 216rpx;
		border-bottom: 1rpx solid #F7F7F7;
	}

	.coupon>view:nth-child(2) {
		border-bottom: 1rpx solid #F7F7F7;
	}

	.a {
		margin-right: 30rpx;
	}

	.b {
		margin-left: 50rpx;
	}

	.c {
		padding: 0 30rpx 0 76rpx;
	}

	.full {
		display: flex;
		line-height: 102rpx;
		font-size: 28rpx;
		font-weight: bolder;
		border-bottom: 1rpx solid #F7F7F7;
		margin-left: 250rpx;
	}

	.d {
		display: flex;
		line-height: 102rpx;
		font-size: 28rpx;
		font-weight: bolder;
		border-bottom: 1rpx solid #F7F7F7;
		margin-left: 250rpx;
	}

	.uni-input {
		margin-top: 30rpx;
		width: 120rpx;
		border-bottom: 1rpx solid black;
	}

	.e {
		padding: 0 60rpx 0 76rpx;
	}

	.f {
		display: flex;
	}

	.SD {
		display: flex;
		line-height: 102rpx;
		font-size: 28rpx;
		font-weight: bolder;
		justify-content: space-between;
		border-bottom: 1rpx solid #F7F7F7;

	}

	.arrow {
		width: 18rpx;
		height: 18rpx;
		border-top: 3rpx solid black;
		border-right: 3rpx solid black;
		right: 30rpx;
		top: 34rpx;
		transform: rotate(45deg);
		margin-top: 42rpx;
		margin-left: 30rpx;
	}

	button {
		width: 200px;
		height: 44px;
		border-radius: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(29, 111, 255, 1);
		border: 1px solid rgba(29, 111, 255, 1);
		margin-top: 50rpx;
	}

	radio-group {
		display: flex;
	}
</style>